還記得 Day 1 開頭那幾句話嗎？
「這個不太對，你再調整一下」
「我要那種比較有質感的」
這種話對你來說很清楚，因為你看著畫面。但對 AI 來說，它不知道「這個」是哪個、「不太對」是哪裡不對。昨天我們用 Next.js 做出了第一版首頁。接下來一定會想改東西，而改東西之前，得先講得出來要改什麼。
今天要做的就是這件事：認識畫面上那些東西的名字，以及怎麼找出「怪怪的」到底是哪裡。
主要會整理一些常見的元件、UI元素的名詞，不需要特別背，但記得之後，跟 AI 溝通可以變得更順暢。
為了方便描述，我們先用兩個尺度來看畫面：
這不是嚴格的技術分類。同一個頁首，看畫面時是一個區塊，在程式碼裡也可能被做成一個元件。今天只是先有一套描述畫面的共同語言。
先看區塊。
| 區塊 | 是什麼 | 在我的首頁上 |
|---|---|---|
| 頁首（Header） | 最上面那一條，通常放網站名稱和選單 | 左邊 BIAS SHELF，右邊「我的收藏」 |
| 導覽列（Nav） | 帶你去其他頁面的那排連結，常住在 Header 裡 | 「專輯資料庫」「收藏指南」 |
| 主視覺區（Hero） | 一進來最大、最醒目的那一區 | 大標語加上黑膠唱片 |
| 區段（Section） | 頁面上一段一段的內容 | 「探索專輯配置」那一整段 |
| 頁尾（Footer） | 最下面，通常放版權、聯絡方式 | 最下方顯示網站名稱的區塊 |
| 麵包屑（Breadcrumb） | 「首頁 > NewJeans > Get Up」這種路徑 | 現在還沒有，等每張專輯有自己的頁面才會出現 |
另外兩個常聽到的：
固定頁首（Sticky header）：往下捲的時候，Header 會黏在最上面不消失。
漢堡選單（Hamburger menu）：手機上那個三條線的圖示。它其實是一顆按鈕，點了之後把收起來的導覽列展開。所以它是元件，只是住在 Header 這個區塊裡——這剛好是區塊和元件最好的分辨例子。
【圖 1｜以 Apple Mac Studio 產品介面為例 】
同樣一堆專輯資料，可以用很多種方式擺出來。
| 元件 | 長什麼樣 | 適合 | 常見在 |
|---|---|---|---|
| 卡片（Card）＋格線（Grid） | 一張張方塊排成好幾欄 | 瀏覽、有圖片、每一筆都想看起來很完整 | 電商商品列表、YouTube 首頁 |
| 列表（List） | 一行一筆，由上往下 | 資訊簡單、要快速掃過 | Email 收件匣、手機的設定頁 |
| 表格（Table） | 有欄有列 | 要比較或整理很多筆同一種資訊 | 公司後台、ERP、CRM、股票報價 |
| 分頁籤（Tabs） | 上面一排標籤，點了切換下面的內容 | 同一件事的不同面向 | 商品頁的「規格／評價／問答」 |
| 手風琴（Accordion） | 點標題展開、再點收起 | 內容很多，但不一定每段都要看 | 常見問題（FAQ） |
| 輪播（Carousel） | 一張一張左右滑 | 輪流展示幾個主打內容 | 網站首頁的大橫幅 |
【圖 2｜各種版型】
List 通常比較適合「逐筆看」，Table 比較適合「跨筆比較」。
視覺上它們其實有時候很像，我個人會去看欄位是否固定對齊，以及使用者是不是需要比較同一欄的資料。
看「常見在」那一欄會發現：要逛的網站幾乎都用卡片（例如電商產品頁面），要處理大量資料的後台幾乎都用表格。
目前首頁顯示專輯是用卡片，因為使用者是來逛的，而且有專輯圖片。但如果哪天要比較同一張專輯各版本的內容物，表格可能反而更適合。不是哪個元件比較好，是使用者現在要做什麼。
現在首頁只有 6 張專輯，一頁就放完了。但如果有 600 張呢？
| 做法 | 體驗 |
|---|---|
| 分頁（Pagination） | 下面有 1、2、3⋯⋯ 可以跳到特定頁 |
| 載入更多（Load more） | 滑到底有一顆按鈕，按了再多出一批 |
| 無限捲動（Infinite scroll） | 滑到底自動載入，一直滑下去 |
三種沒有絕對的好壞。但如果內容會一直自動載入，使用者會很難滑到頁尾。重要資訊放在頁尾的網站，用無限捲動時要另外想辦法——這種事，AI 不一定會主動提醒你。
使用者要「告訴網站一些事」的時候用的東西。
| 元件 | 是什麼 |
|---|---|
| 按鈕（Button） | 按了就做一件事 |
| 文字輸入框（Text input） | 自己打字 |
| 搜尋框（Search） | 專門拿來搜尋的輸入框，常帶一個放大鏡 |
| 下拉選單（Dropdown / Select） | 點開一串選項，選一個 |
| 單選按鈕（Radio） | 一組圓圈，只能選一個 |
| 核取方塊（Checkbox） | 一組方框，可以選好幾個 |
| 開關（Toggle / Switch） | 開或關，通常按了馬上生效 |
| 滑桿（Slider） | 拖著選一個範圍或數值 |
| 篩選膠囊（Chip / Tag） | 一顆顆小圓角標籤，點了就篩選 |
【圖 3｜各種輸入元件】
圖中顯示的是這些元件的經典外觀，並不一定完全長這個樣子，有時候可能會融合多種元素（像是搜尋框某方面來說也算是一種文字輸入框），或是有些人也會自行根據需求去進行設計。
昨天的兩個版本剛好是一組對照：第一版的篩選是一排膠囊，第二版變成下拉選單。
【圖 4｜昨天的兩個版本篩選元件對照】
昨天的兩個版本在專輯篩選所使用的元件不同、篩選的維度也不同（一種用膠囊，篩選團體種類、專輯種類；另一種用下拉選單，可以篩選團體、年份）
哪個比較好，看選項有幾個會是判斷依據之一。選項少，用膠囊或單選按鈕，一眼就看完、不用點開；選項多（例如一百個團體），才收進下拉選單。但如果多到很難找，只是收起來也不夠，還可能需要搜尋或分組。
也有其他的判斷依據，像是操作難易度、選項重要性、選項種類...通常會需要綜合考量。
【圖 5｜一些奇葩的UI設計】
有些元件不在頁面裡，而是疊在頁面上面。
| 元件 | 是什麼 | 在我的網站上 |
|---|---|---|
| 彈出視窗（Modal / Dialog） | 正中間跳出來，背景變暗，要先處理它才能繼續 | 昨天 HTML 版的專輯詳情 |
| 側邊面板（Drawer） | 從旁邊滑出來 | 昨天 next.js 版的專輯詳情 |
| 底部面板（Bottom Sheet） | 從畫面底部往上滑出來，手機上很常見 | 目前沒出現 |
| 通知（Toast） | 角落跳出一小條訊息，幾秒後自己消失 | HTML 版按「複製配置」後出現的「配置已複製」 |
| 提示（Tooltip） | 滑鼠停在某個東西上，旁邊冒出一小段說明 | 目前尚未出現 |
| 徽章（Badge） | 小小的數字或標記，通常在圖示角落 | 「我的收藏」旁邊的數字 |
【圖 6｜浮在畫面上的 UI 元件】
這些元件看起來都是「浮在頁面上」，但從哪裡出現、背景還能不能操作、適合放多少內容，都不太一樣。手機上，有些網站會把桌機從旁邊滑出的面板，換成從底部滑上來的 Bottom Sheet，剛好在大拇指按得到的地方。
昨天 HTML 的版本用 Modal 顯示專輯詳情，Next.js 的版本用 Drawer，因為我們沒有特別在提示詞中去限制 AI，所以就出現了這樣的差異，哪一種比較好，每個人觀點不同。
同一個元件，在不同時候會長得不一樣。
| 狀態 | 什麼時候 |
|---|---|
| 滑過（Hover） | 滑鼠停在上面 |
| 聚焦（Focus） | 被選中準備操作，例如點進輸入框、或用 Tab 鍵移過去 |
| 停用（Disabled） | 現在不能按，通常變灰 |
| 載入中（Loading） | 資料還沒來 |
| 空狀態（Empty） | 沒有資料，例如搜尋不到東西 |
| 錯誤（Error） | 出事了 |
載入中常見的做法有兩種：轉圈圈，或是骨架畫面（Skeleton）——先用灰色色塊畫出內容大概的形狀，資料來了再替換上去。
【圖 7｜常見的 UI 狀態】
【圖 8｜YouTube 首頁骨架畫面】
這些也都是畫面的一部分，只是它們不一定會同時出現。第一版已經有搜尋不到結果時的 Empty state；但如果資料正在讀取，畫面會顯示什麼？讀取失敗時，使用者又會看到什麼？目前的版本還沒有實作。
另外還有兩個常見的小元件，之後會遇到：大頭貼（Avatar），有帳號系統之後就會用到；進度條（Progress），上傳檔案、處理內容時很常見。
狀態相關的實作，通常不太影響功能，但很容易影響使用者體驗。這也是有些人常忽視的一些細節。
「好擠」「太空」「沒對齊」——這可能是很多人最常講、但跟 AI 很容易講不清楚的問題，原因是間距其實有好幾種。
用一幅裱框的畫來想(畫本身是元件)：
| 是什麼 | |
|---|---|
| Padding（內距） | 畫框裡面，畫和框之間的留白 |
| Border（邊框） | 框本身的寬度/厚度 |
| Margin（外距） | 這幅畫和隔壁那幅畫之間的距離 |
【圖 9｜間距示意圖】
所以「卡片太擠」可能是兩件完全不同的事：
還有一個現在很常見的：Gap（間隙）。卡片排成格線的時候，卡片和卡片之間的距離，現在通常是用 gap 統一設定，而不是每張卡片各自設 margin。所以你講「卡片之間太擠」，AI 很可能動的是 gap。講清楚是哪一種，AI 就比較不容易改錯地方。
名字知道了，但有時候你看著畫面，還是分不出來那個空白到底是 padding 還是 margin。這時候就要用到 Day 6 打開過的那個開發者工具。這次我們看的是另外三個功能。
在任何元件上按右鍵 →「檢查」。
滑鼠停在程式碼上時，畫面上對應的元件會亮起來：
一眼就知道那塊空白是哪一種。不同瀏覽器的顏色可能略有差異，右側面板(下圖右下角)也會直接標出每一層的數值。
【圖 10｜檢查元件】
開發者工具左上角有一個手機加平板的圖示（Mac 快捷鍵 Cmd + Shift + M，Windows 是 Ctrl + Shift + M）。
點下去，就可以切換成各種手機尺寸，看排版在小螢幕上會不會跑掉。這個功能很實用，因為你在電腦上開發，但有些時候使用者可能用手機看。
不過它模擬的主要是畫面尺寸，適合快速檢查排版，不能完全取代真的拿手機測試——觸控、鍵盤跳出來、瀏覽器的工具列，這些還是要用真機才看得到。（真機測試在後面的文章會提到）
【圖 11｜手機尺寸模擬】
Hover 效果有個很煩的地方：滑鼠一移開就不見了，很難截圖，也很難描述。
在右邊 Styles 面板點 :hov，勾選 :hover，那個效果就會停在畫面上。
【圖 12｜右邊的專輯強制顯示 hover 狀態】
但要注意選到的元件到底是哪一個，滑鼠移動到程式碼的過程中，會在畫面上顯示相對應的元件。
這邊介紹的只是其中幾個好用的功能，而開發者工具的功能非常的多，有興趣其實也可以和 AI 詢問、了解。
把今天講的全部串起來，像是我發現 next.js 的版本有以下這些問題：
頂部 nav 沒有 sticky 效果、沒有收藏頁面、收藏時看不到Toast通知、搜尋欄沒有 Focus 效果、專輯在手機版上太大張（目前是一張佔據全部寬度），就可以很明確的點出問題在哪裡。
然後我這樣跟它說：
我希望 頂部 nav 可以添加 sticky 效果、並新增收藏頁面、同時添加收藏成功、取消收藏時的Toast通知、並添加搜尋欄Focus 效果。此外專輯在手機版上太大張（目前是一張佔據全部寬度），我希望每一列可以放兩張（或根據螢幕寬度做響應式設計、佈局）
【圖 13｜修改前後對比】
同一個問題，了解 UI 元件的名稱後，可以從模糊的「幫我改這個」變成 AI 較容易直接照做的指令。
如果對於某些細節有更完整的想法（例如搜尋框的 Focus 效果樣式、Toast 的樣式，或是說像希望專輯檢視可以提供切換卡片式與列表式的功能）也可以一併在提示詞提出，AI 會改得更精準。
今天介紹了很多常見的元件。在知道名字、你講得出來的情況下，可以大幅降低 AI 改錯的機會。有時候真的不知道叫什麼其實也沒關係，就截圖問。 把畫面截下來，框起來問 AI「這個元件叫什麼」，也是一個快的方法。
另外，元件的選擇沒有絕對的標準答案，每一個「怎麼選」背後問的都是同一件事：使用者現在要做什麼？ 這其實就是使用者體驗（UX）在想的事情。你不用成為設計師，但只要開始問這個問題，你給 AI 的指令就會不一樣。
畫面講得出來了。明天來看畫面背後的東西：資料。 打開 AI 幫我生的那份假資料，格式整整齊齊，看起來很合理。但身為一個會買專輯的人，看了一眼就發現：它其實不太懂一張專輯到底是怎麼組成的。
明天會來針對 AI 生成的資料動手。
我們明天見。
iThome鐵人賽
看影片追技術